<template>
  <div class="add-img-con" :style="getStyles">
    <div v-if="imgUrl" class="img-con">
      <div class="btns-con">
        <!-- <el-button v-if="isCrop" type="primary" size="small" @click.stop="onCrop" class="btn-crop">
          <el-icon><i class="jy-icon-crop"></i></el-icon>
        </el-button> -->
        <el-button v-if="isDelete" type="danger" size="small" class="btn-delete" @click.stop="onDelete" >
          <el-icon><i class="jy-icon-delete"></i></el-icon>
        </el-button>
      </div>
      <img :src="imgUrl">
      <p class="info" @click.stop="onShowImgPop">点击更换</p>
    </div>
    <div v-else class="img-con" @click.stop="onShowImgPop"><i class="jy-icon-plus"></i> 添加图片</div>
  </div>
</template>

<script setup lang="ts">
import { MEDIAS } from '@/const/web/'
import { getPxOVwByValue } from '@/utils'
import { useWebSiteStore } from '@/store/web/site'
import { useWebPageStore } from '@/store/web/page'
import { useWebComponentStore } from '@/store/web/component'
import { useWebMediaStore } from '@/store/web/media'
import { useWebControlsStore } from '@/store/web/controls'

interface Props {
  isInteractionData?: boolean,
  isCrop?: boolean,
  isDelete?: boolean,
  btnLabel?: string,
  url?: string,
  height?: number,
  width?: number,
  index?: number,
  qIndex?: number,
  picAttr: string,
  comAttr?: string,
  event?: any,
}
const props = withDefaults(defineProps<Props>(), {
  isInteractionData: false,
  isCrop: false,
  isDelete: true,
  btnLabel: '添加图片',
  url: '',
  height: 180,
  width: 268,
  index: -1,
  qIndex: -1,
  comAttr: '',
  event: null,
})

const wid = Number(props.width) >= 266 ? 266 : props.width
const hei = props.height
const getStyles = computed(() => {
  return  { width: getPxOVwByValue(Number(wid)), height: getPxOVwByValue(Number(hei)) }
})
const imgUrl = computed(() => {
  return props.url ? props.url : ""
})
const useWebSite = useWebSiteStore()
const useWebPage = useWebPageStore()
const useWebComponent = useWebComponentStore()
const useWebMedia = useWebMediaStore()
const useWebControls = useWebControlsStore()

const onShowImgPop = () => {
  const params = {item: MEDIAS.image, type: MEDIAS.image.type, index: props.index, qIndex:props.qIndex, picAttr:props.picAttr, comAttr:props.comAttr, event: props.event, isInteractionData: props.isInteractionData};
  useWebMedia.setMediaPop(params)
}

const onDelete = () => {
  let url = ''
  //在lists时index会传过来，否者就是默认值-1，
  if(!useWebComponent.currentComponentData) {
    let attrs =  { bgUrl: url }
    if(useWebPage.isSite) {
      useWebSite.updateSiteAttrs(attrs)
    } else {
      useWebPage.updatePageAttrs({attrs})
    }
  } else {
    const comAttr: string = props.comAttr
    const picAttr: string = props.picAttr
    const index: string = _.toString(props.index)
    const qIndex: string = _.toString(props.qIndex)
    if(Number(props.index) >= 0) {
      const data_: any = { item: {}, index: props.index }
      data_.item[picAttr] = ''
      const isInteractionData = props.isInteractionData
      const interactionData: any = _.cloneDeep(useWebComponent.currentComponentData.interactionData)
      if(isInteractionData) {
        if(interactionData.isDimension){
          interactionData[comAttr][index][qIndex][picAttr] = ''
        } else {
          interactionData[comAttr][index][picAttr] = 'url'
        }
        useWebComponent.updateInteractionData(interactionData)
      } else if(props.event && props.event!.controlId) {
        data_.controlId = props.event!.controlId
        useWebControls.updateWbComponentItem(data_)
      } else {
        if(Number(props.qIndex) >= 0) {
          delete data_.item[picAttr]
          data_.item[comAttr] = []
          data_.item[comAttr][qIndex] = {}
          data_.item[comAttr][qIndex][picAttr] = ''
          useWebComponent.updateComponentItem(data_)
        } else {
          useWebComponent.updateComponentItem(data_)
        }
      }
    } else {
      const params: any = {}
      const isHaveCom = comAttr && comAttr.length > 0
      if(isHaveCom) {
        const comAttrs = comAttr.split(".")
        if(comAttrs.length > 1) {
          //@ts-ignore
          const comAttr_: string = comAttrs.shift()
          recursionAssignment(comAttrs.join('.'), params[comAttr_] = {}, picAttr, url)
        } else {
          params[comAttr] = {}
          params[comAttr][picAttr] = url
        }
      } else {
        params[picAttr] = ''
      }
      useWebComponent.updateCurrentComponentData(params)
    }
  }
}
const recursionAssignment = (comAttr: any, params: any, picAttr: string, url: string) => {
  const comAttrs = comAttr.split(".")
  if(comAttrs.length > 1) {
    const comAttr_ = comAttrs.shift()
    recursionAssignment(comAttrs.join('.'), params[comAttr_] = {}, picAttr, url)
  } else {
    params[comAttr] = {}
    params[comAttr][picAttr] = url;
  }
}
</script>
